<!--
  * 车牌新增
  *
-->
<template>
    <a-modal :title="form.id ? '编辑' : '添加'" :width="500" v-model:visible="visible"  @ok="onSubmit">
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7}">
        <a-form-item label="车辆属性" name="carCode">
           <a-select
            v-model:value="form.carCode"
                style="width: 100%"
                placeholder="请选择"
                :options="[{value:'单位',label:'单位'},{value:'个人',label:'个人'}]"
           >
           <!-- options要求value传中文汉字 -->
           </a-select>
        </a-form-item>
        
        <a-form-item label="白名单" name="whitelistIp">
          <a-select
            v-model:value="form.whitelistIp"
                style="width: 100%"
                mode="tags"
                placeholder="请选择"
                :options="deviceList"
           ></a-select>
        </a-form-item>
        <a-form-item label="车牌" name="carPlate">
          <a-input v-model:value="form.carPlate" placeholder="请输入车牌" />
        </a-form-item>
        <a-form-item label="归属单位/个人名称" name="cmpName">
          <a-input v-model:value="form.cmpName" placeholder="请输入归属单位/个人名称" />
        </a-form-item>
        <a-form-item label="车辆类型" name="carType">
            <a-select
                v-model:value="form.carType"
                style="width: 100%"
                placeholder="Tags Mode"
                :options="[{value:'卡车',label:'卡车'},{value:'小轿车',label:'小轿车'},{value:'面包车',label:'面包车'}]"
            >
            </a-select>
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="form.status">
            <a-radio :value="0">不可通行</a-radio>
            <a-radio :value="1">可通行</a-radio>
            <a-radio :value="2">识别码报废</a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- <a-form-item label="通行识别码" name="tag">
            <a-input v-model:value="form.tag" placeholder="请输入通行识别码" />
        </a-form-item> -->
        <a-form-item label="车辆通行开始时间" name="start">
          <a-date-picker show-time placeholder="请选择时间" v-model:value="form.start" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
        <a-form-item label="车辆通行结束时间" name="end">
          <a-date-picker show-time placeholder="请选择时间" v-model:value="form.end" valueFormat="YYYY-MM-DD HH:mm:ss" />
        </a-form-item>
      </a-form>
      </a-modal>
    <!-- <a-drawer :title="form.id ? '编辑' : '添加'" :width="500" :open="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
        <a-form-item label="车辆识别码" name="carCode">
          <a-input v-model:value="form.carCode" placeholder="请输入车辆识别码" />
        </a-form-item>
        <a-form-item label="车牌" name="carPlate">
          <a-input v-model:value="form.carPlate" placeholder="请输入车牌" />
        </a-form-item>
        <a-form-item label="公司名称" name="cmpName">
          <a-input v-model:value="form.cmpName" placeholder="请输入公司名称" />
        </a-form-item>
        <a-form-item label="车辆类型" name="carType">
            <a-select
                v-model:value="form.carType"
                style="width: 100%"
                placeholder="Tags Mode"
                :options="[{value:'0',label:'卡车'},{value:'1',label:'小轿车'},{value:'2',label:'面包车'}]"
            >
            </a-select>
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="form.status">
            <a-radio :value="0">不可通行</a-radio>
            <a-radio :value="1">可通行</a-radio>
            <a-radio :value="2">识别码报废</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="通行识别码" name="tag">
            <a-input v-model:value="form.tag" placeholder="请输入通行识别码" />
        </a-form-item>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">提交</a-button>
      </div>
    </a-drawer> -->
  </template>
  <script setup>
    import { ref, nextTick, reactive,onMounted } from 'vue';
    import CategoryTree from '/@/components/business/category-tree-select/index.vue';
    import { CATEGORY_TYPE_ENUM } from '/@/constants/business/erp/category-const';
    import { message } from 'ant-design-vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
    import _ from 'lodash';
    import { goodsApi } from '/@/api/business/goods/goods-api';
    import { smartSentry } from '/@/lib/smart-sentry';
    import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
    import DictSelect from '/@/components/support/dict-select/index.vue';
     import {plateNumberApi} from '/@/api/licensePlate/transit/plateNumber';
     import { cameraDevicesApi } from '/@/api/licensePlate/camera-devices/camera-devices-api';
    import moment from 'moment';
  
    // emit
    const emit = defineEmits(['reloadList']);
  // 白名单列表
    const deviceList = ref([])
    // 组件ref
    const formRef = ref();
  
    const formDefault = {
      // 白名单
      whitelistIp:[],
      //车辆识别码
      carCode: undefined,
      //车牌
      carPlate: undefined,
    //公司名称
      cmpName:'',
    //   车辆类型
      carType:'小轿车',
    //   状态
      status:0,
    //   通行识别码
      tag:'',
      start:moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
      end:''
    };
    let form = reactive({ ...formDefault });
    const rules = {
        carCode: [{ required: true, message: '请输入车辆识别码' }],
        carPlate: [{ required: true, message: '请输入车牌' }],
        cmpName: [{ required: true, message: '请输入公司名称' }],
        // tag: [{ required: true, message: '请输入通行识别码' }],
        carType: [{ required: true, message: '请选择车辆类型' }],
        start: [{ required: true, message: '请选择时间' }],
        end: [{ required: true, message: '请选择时间' }],
        whitelistIp:[{ required: true, message: '请选择白名单'}],
    };
    // 是否展示抽屉
    const visible = ref(false);
  
    function showDrawer(rowData) {
      Object.assign(form, formDefault);
      if (rowData && !_.isEmpty(rowData)) {
        Object.assign(form, rowData);
      }
      if (form.place && form.place.length > 0) {
        form.place = form.place.map((e) => e.valueCode);
      }
      // console.log(form.whitelistIp)
      if(form.whitelistIp&&form.whitelistIp.length){
        form.whitelistIp = form.whitelistIp.split(',')
      }
      visible.value = true;
      nextTick(() => {
        formRef.value.clearValidate();
      });
    }
  
    function onClose() {
      Object.assign(form, formDefault);
      visible.value = false;
    }
  
    function onSubmit() {
      console.log('form.value',form)
      form.whitelistIp = form.whitelistIp.join(',')
      formRef.value
        .validate()
        .then(async () => {
          SmartLoading.show();
          try {
            if (form.id) {
              await plateNumberApi.update(form);
            } else {
              await plateNumberApi.add(form);
            }
            message.success(`${form.id ? '修改' : '添加'}成功`);
            onClose();
            emit('reloadList');
          } catch (error) {
            smartSentry.captureError(error);
          } finally {
            SmartLoading.hide();
          }
        })
        .catch((error) => {
          console.log('error', error);
          message.error('参数验证错误，请仔细填写表单数据!');
        });
    }
    onMounted(()=>{
      // 获取白名单下拉
      cameraDevicesApi.queryAll().then(res=>{
        console.log(res.data)
        deviceList.value = res.data.map(item=>{
          console.log(item)
          let obj = {
            value:item.camIp,
            label:item.camName||'未命名'
          }
          return obj
        })
      })
    })
    defineExpose({
      showDrawer,
    });
  </script>
  